<script setup lang="ts">
import { ref } from 'vue';

import { Page, VbenButton } from '@vben/common-ui';

import { Card, Modal, Space } from 'ant-design-vue';

import { OperationType, twentyGenerate } from '#/views/kinder/math/ts/math';
// 控制弹窗隐藏和现实
const visible = ref<boolean>(false);
const title = ref<String>('');
// 定义弹窗标题
// 20以内不进位加法的生成算术题逻辑
const typeTitles = ref<Array<string>>([
  '20以内不进位加法',
  '20以内不借位减法',
  '20以内不进/借位加减法',
  '凑十法',
]);
const twentyAddResult = ref<string[][]>([[]]);
const twentyAdd = () => {
  title.value = typeTitles.value[0]!;
  printObj.popTitle = typeTitles.value[0]!;
  // 调用生成双层数组的方法
  twentyAddResult.value = twentyGenerate(20, OperationType.ADD_NO_JIN);
  visible.value = true;
};
const twentySub = () => {
  title.value = typeTitles.value[1]!;
  printObj.popTitle = typeTitles.value[1]!;
  // 调用生成双层数组的方法
  twentyAddResult.value = twentyGenerate(20, OperationType.ADD_NO_JIN);
  visible.value = true;
};
const twentyFix = () => {
  title.value = typeTitles.value[2]!;
  printObj.popTitle = typeTitles.value[2]!;
  // 调用生成双层数组的方法
  twentyAddResult.value = twentyGenerate(20, OperationType.ADD_SUB_NO_FIX);
  visible.value = true;
};
// 凑十法
const addTen = () => {
  title.value = typeTitles.value[3]!;
  printObj.popTitle = typeTitles.value[3]!;
  // 调用生成双层数组的方法
  twentyAddResult.value = twentyGenerate(10, OperationType.ADD_TEN, 5);
  visible.value = true;
};
// 打印的配置项
const printObj = {
  id: 'printTable',
  popTitle: '',
};
</script>

<template>
  <Page>
    <Card>
      <Space>
        <VbenButton @click="twentyAdd"> {{ typeTitles[0] }} </VbenButton>
        <VbenButton @click="twentySub"> {{ typeTitles[1] }} </VbenButton>
        <VbenButton @click="twentyFix"> {{ typeTitles[2] }} </VbenButton>
        <VbenButton @click="addTen"> {{ typeTitles[3] }} </VbenButton>
      </Space>
    </Card>
    <Modal
      width="60%"
      v-model:visible="visible"
      :title="title"
      :footer="null"
      center="true"
    >
      <div id="outDiv">
        <div id="printTable">
          <table border="1">
            <tr
              v-for="(item, index) in twentyAddResult"
              :key="index"
              :class="twentyAddResult.length === 5 ? 'height-tr' : 'normal-tr'"
            >
              <td v-for="(innerItem, innerIndex) in item" :key="innerIndex">
                <span>{{ innerItem }}</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="mt-4 flex h-10 w-full flex-row justify-end">
        <VbenButton v-print="printObj"> 打印</VbenButton>
      </div>
    </Modal>
  </Page>
</template>

<style scoped lang="scss">
#outDiv {
  overflow-y: scroll;
  height: 450px;
}
table {
  width: 98%;
  border-width: 1px;
  border-color: black;
  font-size: 18px;

  .normal-tr {
    height: 68px;
  }
  .height-tr {
    height: 200px;
    text-align: center;
    td {
      position: relative;
      span {
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
      }
    }
  }
  td {
    border-width: 1px;
    border-color: black;
    padding: 0 10px;
  }
}
</style>
